<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="renderer" content="webkit">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>[简历]傅经年-前端开发工程师/厦门</title>
    <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="assets/css/typo.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/index.css">
    <script>
        function loading() {
            document.getElementsByClassName('avatar')[0].style.display = 'block';
            document.getElementsByClassName('loading')[0].style.display = 'none';
        }
    </script>
</head>

<body>

    <header class="header"></header>

    <article class="container">
        <section class="side" id="side">

            <!-- 左栏固定开关，记得及时删除这段代码 Start-->
            <label class="switch" style="display: none;" onchange="switchFixed()">
                <script type="text/javaScript">
                    function switchFixed(){
                        var value = document.getElementById('side').style.position === 'fixed' ? 'absolute' : 'fixed';
                        document.getElementById('side').style.position = value;
                    }
                </script>
                <input id="cb" type="checkbox">
                <span class="slider round"></span>
            </label>
            <style>
                @media (min-width: 414px){
                    .switch{position:relative;display:inline-block!important;width:60px;height:34px;}
                    .switch input{display:none;}
                    .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s;}
                    .slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:white;-webkit-transition:.4s;transition:.4s;}
                    input:checked + .slider{background-color:#1abc9c;}
                    input:focus + .slider{box-shadow:0 0 1px #1abc9c;}
                    input:checked + .slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px);}.slider.round{border-radius:34px;}
                    .slider.round:before{border-radius:50%;}
                }
            </style>
            <!-- 左侧固定开关，记得及时删除这段代码 End-->

            <!-- 个人肖像 -->
            <section class="me">
                <section class="portrait">
                    <div class="loading">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <!-- 头像照片 -->
                    <img class="avatar" src="assets/images/avatar.jpg" onload="loading()">
                </section>

                <h1 class="name">傅经年</h1>
                <h4 class="info-job">前端开发工程师</h4>

            </section>

            <!-- 基本信息 -->
            <section class="profile info-unit">
                <h2>
                    <i class="fa fa-user" aria-hidden="true"></i>基本信息</h2>
                <hr/>
                <ul>
                    <li>
                        <label>个人信息</label>
                        <span>傅经年 / 男 / 23岁</span>
                    </li>
                    <li>
                        <label>所在地</label>
                        <span>厦门</span>
                    </li>
                    <li>
                        <label>关于我</label>
                        <span>自学能力强，喜欢折腾新技术，行动派</span>
                    </li>
                </ul>
            </section>

            <!-- 联系方式 -->
            <section class="contact info-unit">
                <h2>
                    <i class="fa fa-phone" aria-hidden="true"></i>联系方式</h2>
                <hr/>
                <ul>
                    <li>
                        <label>手机/微信</label>
                        <a href="tel:18559655612" target="_blank">185-5965-5612</a>
                    </li>
                    <li>
                        <label>邮箱</label>
                        <a href="mailto:jingnian.fu@gmail.com " target="_blank">jingnian.fu@gmail.com</a>
                    </li>
                    <li>
                        <label>Github</label>
                        <a href="https://github.com/fujingnian" target="_blank">fujingnian</a>
                    </li>
                    <li>
                        <label>Blog</label>
                        <a href="https://jingnian.top" target="_blank">jingnian.top</a>
                    </li>
                </ul>
            </section>

           <!-- 技能点 -->
            <section class="skill info-unit">
                <h2>
                    <i class="fa fa-code" aria-hidden="true"></i>技术栈</h2>
                <hr/>
                <ul>
                    <li>
                        <label>HTML</label>
                        <progress value="85" max="100"></progress>
                    </li>
                    <li>
                        <label>CSS</label>
                        <progress value="85" max="100"></progress>
                    </li>
                    <li>
                        <label>JavaScript</label>
                        <progress value="80" max="100"></progress>
                    </li>
                    <li>
                        <label>jQuery</label>
                        <progress value="80" max="100"></progress>
                    </li>
                    <li>
                        <label>Ajax</label>
                        <progress value="80" max="100"></progress>
                    </li>
                    <li>
                        <label>vue</label>
                        <progress value="70" max="100"></progress>
                    </li>
                    <li>
                        <label>Node.js</label>
                        <progress value="60" max="100"></progress>
                    </li>
                    <li>
                        <label>Less</label>
                        <progress value="60" max="100"></progress>
                    </li>
                    <li>
                        <label>Mongodb</label>
                        <progress value="50" max="100"></progress>
                    </li>
                    </li>
                    <li>
                        <label>PHP</label>
                        <progress value="50" max="100"></progress>
                    </li>
                    <li>
                        <label>SQL</label>
                        <progress value="50" max="100"></progress>
                    </li>
                </ul>
            </section> 
            <!-- 技术栈 -->
            <!-- <div class="stack info-unit">
                    <h2><i class="fa fa-code" aria-hidden="true"></i>技术栈</h2>
                    <hr/>
                    <ul>
                        <li>
                            <label>前端</label>
                            <span>HTML、css、javascript、jQuery、Bootstrap、LESS</span>
                        </li>
                        <li>
                            <label>后端</label>
                            <span>Node.js、MySQL、MongoDB、PHP</span>
                        </li>
                        <li>
                            <label>其他</label>
                            <span>Git</span>
                        </li>
                    </ul>
            </div> -->
        </section>

        <section class="main">

            <!-- 教育经历 -->
            <section class="edu info-unit">
                <h2>
                    <i class="fa fa-graduation-cap" aria-hidden="true"></i>教育经历</h2>
                <hr/>
                <ul>
                    <li>
                        <h3>
                            <span>重庆水利电力职业技术学院 - 建筑装饰技术（专科）</span>
                            <time>2013.9-2016.7</time>
                        </h3>
                    </li>
                </ul>
            </section>

            <!-- 工作经历 -->
            <section class="work info-unit">
                <h2>
                    <i class="fa fa-shopping-bag" aria-hidden="true"></i>工作经历</h2>
                <hr/>
                <ul>
                    <li>
                        <h3>
                            <span>[经历1]重庆金蜜蜂装饰工程有限公司 - 设计师助理</span>
                            <time>2015.10 - 2016.06</time>
                        </h3>
                        <ul class="info-content">
                            <li>协助设计师完成方案图纸或施工图纸的绘制，及公司安排的相关工作</li>
                        </ul>
                    </li>
                    <li>
                        <h3>
                            <span>[经历2]厦门开建建设有限公司 - 施工员</span>
                            <time>2016.08-2018.1</time>
                        </h3>
                        <ul class="info-content">
                            <li>负责现场施工和管理，现场放样和测量，和各班组负责人协同施工。</li>
                        </ul>
                    </li>                    
                </ul>
            </section>

            <!-- 项目经验 -->
            <section class="project info-unit">
                <h2><i class="fa fa-terminal" aria-hidden="true"></i>个人项目</h2>
                <hr/>
                <ul>
                    <li>
                        <h3>
                            <span>[项目1]js面向对象编程 - 贪吃蛇</span>
                            <span class="link">
                                <a href="https://github.com/fujingnian/snake" target="_blank">Demo</a>
                            </span>
                            <time>2018.3-2018.8</time>
                        </h3>
                        <ul class="info-content">
                            <li>技术栈：css + html + javeScript</li>
                            <li>
                                <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                                [目标]以面向思想的方式编写贪吃蛇
                                <p>1、运用万物皆对象的理念，把地图、蛇、食物小方块都看作是对象</p>
                                <p>2、同时，整个贪吃蛇游戏，也是一个游戏对象，并且这个游戏对象包含地图、蛇、食物小方块</p>
                                <p>3、最后只需要new出游戏对象，仅三行代码写出贪吃蛇</p>
                            </li>                            
                        </ul>
                    </li>
                    <li>
                        <h3>
                            <span>[项目2]仿阿里百秀</span>
                            <span class="link">
                                <a href="https://github.com/fujingnian/baixiu" target="_blank">Demo</a>
                            </span>
                            <time>2018.3-2018.8</time>
                        </h3>
                        <ul class="info-content">
                            <li>技术栈：css + html + javeScript + php + mysql + nprogress + art-template + twbs-pagination</li>
                            <li>
                                <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                                [目标]php编写阿里百秀后台管理系统
                                <p>1、使用session存储用户登录状态，并验证用户权限</p>
                                <p>2、用户的注册和修改，文章的发布和删除等，都是基于mysql的crud</p>
                                <p>3、在服务端处理分页查询的逻辑（关联数据查询以及升序降序），客户端只需要使用ajax接收数据并渲染到页面</p>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <h3>
                            <span>[项目3]仿乐淘电商</span>
                            <span class="link">
                                <a href="https://github.com/fujingnian/letao" target="_blank">Demo</a>
                            </span>
                            <time>2018.3-2018.8</time>
                        </h3>
                        <ul class="info-content">
                            <li>技术栈：css + html + javeScript + ajax + sql +node-express  + mui + art-template</li>
                            <li>
                                <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                                [目标]掌握移动端前后端分离模式开发商城
                                <p>1、前后端完全分离，所有数据都使用ajax进行交互</p>
                                <p>2、运用localStorage存储本地搜索商品记录</p>
                                <p>3、待后续更新和完善...</p>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <h3>
                            <span>[项目4]仿去哪儿vue项目</span>
                            <span class="link">
                                <a href="https://github.com/fujingnian/Travel" target="_blank">Demo</a>
                            </span>
                            <time>2018.3-2018.8</time>
                        </h3>
                        <ul class="info-content">
                            <li>技术栈：css + html + javeScript + axios + vue-cli + vue + vuex + vue-route + babel</li>
                            <li>
                                <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                                [目标] 掌握Vue的基础知识和开发技巧
                                <p>1、本项目使用 vue-cli 构建项目，使用 eslint 进行代码规范，运用了 stylus 进行样式编写</p>
                                <p>2、开发过程中了解到了 axios和vue-resource 用法</p>
                                <p>3、并运用 es6 语法进行编写，熟悉了利用 webpack 打包项目并上线的流程</p>
                            </li>
                        </ul>
                    </li>
                </ul>
                <a href="https://github.com/fujingnian?tab=repositories" target="_blank">查看更多项目...</a>
            </section>
            <!-- 技术栈 -->
            <section class="skill info-unit">
                <h2>
                    <i class="fa fa-code" aria-hidden="true"></i>技术栈</h2>
                <hr/>
                <ul class="assess">
                    <p>1、HTML5+CSS3：熟练掌握html5 及 css3 新特性，div+css布局，响应式布局，及CSS3的过渡动
                        画</p>
                    <p>2、JavaScript：熟练掌握DOM 操作、原型链、闭包、事件冒泡、事件捕获、事件委托等，利用原
                        生 js OOP编程模式开发过“贪吃蛇小游戏”</p>
                    <p>3、Ajax： 熟练运用ajax同后台进行数据交互</p>
                    <p>4、jQuery：能在实际开发中运用 jquery 类库，实现网页特效等</p>
                    <p>5、ES6：熟悉 es6 基础语法，箭头函数、解构赋值，promise等</p>
                    <p>6、vue.js：熟悉 vue.js 基础语法，运用·vue.js 开发过“仿去哪儿”项目</p>
                    <p>7、Webpack：熟悉 webpack 的基本配置，可运用 webpack 对项目进行打包上线</p>
                    <p>8、PHP：掌握 PHP 基础语法，熟悉mysql数据库CRUD，及分页数据查询</p>
                    <p>9、node.js：熟悉 node.js+mongodb的开发</p>
                </ul>
            </section>
            <!-- 自我评价 -->
            <section class="work info-unit">
                <h2>
                    <i class="fa fa-pencil" aria-hidden="true"></i>自我评价/期望</h2>
                <hr/>
                <ul class="assess">
                    <li>自学能力强，能快速接受使用新知识</li>
                    <li>良好的分析解决问题能力，和自我管理能力</li>
                    <li>具有面向对象设计思想，具备独立分析和解决问题的能力</li>
                    <li>有较好的团队协作和沟通能力，有强烈的责任心</li>
                    <li>具有良好的沟通表达、团队协作能力</li>
                    <li>有较强的学习能力和探索精神，责任心强。</li>
                </ul>
            </section>
        </section>
    </article>



    <footer class="footer">
        <p>© 2018 傅经年.文档最后更新时间为
            <time>2018年09月16日</time>.</p>
    </footer>



    <script src="./assets/js/index.js"></script>
</body>

</html>
